<!doctype html>
<html lang="fr">
    <head>
	

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
       
        <title>Boutique culturelle</title>
		<style type="text/css">
html, body{
    font-family:'Arial', sans-serif;
    margin:0;padding:0;
    width:100%;
    height:100%;
    color:#00000;
    background-color:#008080;
}
h1 {
font-family:verdana, sans-serif;
font-size:300%;
color:black;
background-color:transparent;
text-align:center;
}

body{
    background-image:url('http://www.infoject.fr/images/articles/9_bg_lr_1_small.png'), url('http://www.infoject.fr/images/articles/9_bg_lr_2_small.png'), url('http://www.infoject.fr/images/articles/9_bg_lr_3_small.png');
    background-position:0% 0px, 0% 0px, 0% 0px;
    background-repeat:repeat-x;
    background-size:contain;

    -ms-animation: movingBg 25s linear infinite alternate;
    -moz-animation: movingBg 25s linear infinite alternate;
    -webkit-animation: movingBg 25s linear infinite alternate;
}

/*******************************
** Animations
*******************************/
@-ms-keyframes movingBg{
    0%{background-position:0% 0px, 50% 0px, 100% 0px;}
    10%{background-position:3% 0px, 43% 0px, 92% 0px;}
    20%{background-position:8% 5px, 33% -10px, 80% 0px;}
    40%{background-position:15% 15px, 30% 0px, 60% 15px;}
    60%{background-position:25% 20px, 20% 15px, 40% 0px;}
    80%{background-position:31% 25px, 12% 25px, 20% 8px;}
    90%{background-position:37% 29px, 5% 28px, 5% 13px;}
    100%{background-position:40% 30px, 3% 30px, 0% 15px;}
}

@-moz-keyframes movingBg{
    0%{background-position:0% 0px, 50% 0px, 100% 0px;}
    10%{background-position:3% 0px, 43% 0px, 92% 0px;}
    20%{background-position:8% 5px, 33% -10px, 80% 0px;}
    40%{background-position:15% 15px, 30% 0px, 60% 15px;}
    60%{background-position:25% 20px, 20% 15px, 40% 0px;}
    80%{background-position:31% 25px, 12% 25px, 20% 8px;}
    90%{background-position:37% 29px, 5% 28px, 5% 13px;}
    100%{background-position:40% 30px, 3% 30px, 0% 15px;}
}

@-webkit-keyframes movingBg{
    0%{background-position:0% 0px, 50% 0px, 100% 0px;}
    10%{background-position:3% 0px, 43% 0px, 92% 0px;}
    20%{background-position:8% 5px, 33% -10px, 80% 0px;}
    40%{background-position:15% 15px, 30% 0px, 60% 15px;}
    60%{background-position:25% 20px, 20% 15px, 40% 0px;}
    80%{background-position:31% 25px, 12% 25px, 20% 8px;}
    90%{background-position:37% 29px, 5% 28px, 5% 13px;}
    100%{background-position:40% 30px, 3% 30px, 0% 15px;}
}
 #menu  ul {
 padding:0;
 margin:0;
 list-style-type:none;
 }
 #menu li {
 float:left; /*pour IE*/
 border-left:1px solid grey;
 }
 #menu ul li a {
 display:block;
 float:left;   
 width:269px;
 line-height:45px; /*hauteur de l'image de fond*/
 background:black url(http://www.psd-file.com/images/tuto_icone_glossy/01.jpg) repeat-x;
 color:#DCDCDC;
 text-decoration:none;
 text-align:center;
 }
 #menu ul li a:hover {
 background:black url(http://visionnervideo.com/images/degrade-noir-horizontal.jpg) repeat-x;
 color:white;
 }  
  #menu ul li ul {
 display:none;
 }
 #menu ul li:hover ul {
 display:block;
 }
#menu li:hover ul li {
 float:none;
 }

#menu li ul {
 position:absolute;
 }
</style>
<header> <table class="table">
		 <td width="5%" rowspan="2" valign="top"><img src="http://www.bankingconnects.com/picts/articles/BC%20Square%20Logo_with%20shadow%202010.jpg"  width="150" height="110" /></td>
		<td>
	 
			<h1><center>BOUTIQUE CULTURELLE</center></h1>  </td>
			
	   <td>
	    <p align="right"><a href=""><strong>Inscription</strong></a><br/> 
		<p align="right"><a href=""><strong> Espace client</strong></a><br/> 
		<p align="right"><a href=""><strong>Panier</strong></a><br/> </td>
     </table>
	
	</header>
</head>
<body>
<div id="menu">
	<ul>
		<li><a href=""><strong>CD</strong></a>
			<ul>
				<li><a href="#">Variété</a></li>
				<li><a href="#">Pop-Rock</a></li>
				<li><a href="#">Dancefloor</a></li>
				<li><a href="#">Rap/Hip-Hop</a></li>
				<li><a href="#">Classique</a></li>
			</ul></li>
		<li><a href=""><strong>DVD</strong></a>
			<ul>
				<li><a href="#">Action</a></li>
				<li><a href="#">Comédie</a></li>
				<li><a href="#">Drame</a></li>
				<li><a href="#">Documentaire</a></li>
				<li><a href="#">Fantastique</a></li>
				<li><a href="#">Jeunesse</a></li>
			</ul></li>
		<li><a href=""><strong>Livres</strong></a>
			<ul>
				<li><a href="#">Classiques</a></li>
				<li><a href="#">Policier</a></li>
				<li><a href="#">Amour</a></li>
				<li><a href="#">BD/Manga</a></li>
				<li><a href="#">Aventure</a></li>
				<li><a href="#">Essais</a></li>
			</ul></li>
		<li><a href=""><strong>Pack Culture</strong></a></li>
		<li><a href=""><strong>Recherche</strong></a></li>

	</ul>
	
	<br/> <br/><br/> <br/>
 
	<tr>
         <p> <center>
         <SPAN class=texte><SPAN style="FONT-SIZE: 12pt; FONT-FAMILY: 'verdana, sans-serif'; mso-fareast-font-family: 'verdana, sans-serif'; mso-ansi-language: FR; mso-fareast-language: FR; mso-bidi-language: AR-SA"><FONT face=Georgia>
         <P><BR>Bienvenue sur la boutique culturelle en ligne</FONT></SPAN></SPAN><SPAN style="FONT-SIZE: 12pt; FONT-FAMILY: 'Times New Roman'; mso-fareast-font-family: 'Times New Roman'; mso-ansi-language: FR; mso-fareast-language: FR; mso-bidi-language: AR-SA"><BR><BR><FONT face=Georgia><SPAN class=texte> Nous proposons de nombreux <a href=""><strong>Livres</strong></a>, <a href=""><strong>CD</strong></a> et <a href=""><strong>DVD</strong></a>. Notre catalogue de produits se compose ainsi de classiques mais aussi de nouveautés.</SPAN><BR><BR><SPAN class=texte>Nous vous proposons également de composer un <a href=""><strong>Pack Culture</strong></a></td> économique composé d'un CD, un DVD et un Livre pour seulement 30 euros.</SPAN><BR><BR><SPAN class=texte>Notre équipe reste à votre disposition en cas de question ou de problème de navigation.</SPAN></FONT></SPAN></P>
         <P><SPAN style="FONT-SIZE: 12pt; FONT-FAMILY: 'verdana, sans-serif'; mso-fareast-font-family: 'verdana, sans-serif'; mso-ansi-language: FR; mso-fareast-language: FR; mso-bidi-language: AR-SA"><FONT face=Georgia><SPAN class=texte></SPAN></FONT></SPAN>&nbsp;</P>
         </p><P align=center><SPAN style="FONT-SIZE: 12pt; FONT-FAMILY: 'Times New Roman'; mso-fareast-font-family: 'Times New Roman'; mso-ansi-language: FR; mso-fareast-language: FR; mso-bidi-language: AR-SA"><FONT face=Georgia><SPAN class=texte><STRONG>Bon Shopping</STRONG></SPAN></FONT></SPAN></P>
         <P align=center><SPAN style="FONT-SIZE: 12pt; FONT-FAMILY: 'Times New Roman'; mso-fareast-font-family: 'Times New Roman'; mso-ansi-language: FR; mso-fareast-language: FR; mso-bidi-language: AR-SA"><FONT face=Georgia><SPAN class=texte><STRONG>L'équipe commerciale</STRONG></SPAN></FONT></SPAN></P>
         <center/></p> 
    </tr>




</body>
</html>
	